<template>
    <div v-if="show" class="ai-robot-container" 
         :style="{ left: left + 'px', top: top + 'px' }" 
         @touchstart="touchStart" 
         @touchmove="touchMove" 
         @touchend="touchEnd">
        <view class="close-btn" @click.stop="close">
            <text>×</text>
        </view>
        <image class="ai-robot-gif" src="/static/image/AIRobot.gif" mode="aspectFit" @click.stop="toAIPage"></image>
    </div>
</template>

<script>
// 移除mixins依赖，直接使用全局的toPage方法
export default {
    name: "ai-robot",
    data() {
        return {
            show: true,
            left: 0,
            top: 0,
            isDragging: false,
            startX: 0,
            startY: 0,
            windowWidth: 0,
            windowHeight: 0
        }
    },
    mounted() {
        // 获取屏幕尺寸并设置初始位置
        const { windowWidth, windowHeight } = uni.getSystemInfoSync();
        this.windowWidth = windowWidth;
        this.windowHeight = windowHeight;
        // 初始位置（右侧底部）
        this.left = windowWidth - 75 ; 
        this.top = windowHeight - 150; 
    },
    methods: {
        toAIPage() {
            // 修复路径，使用正确的AI页面路径
            this.toPage('/pages/AI/chat')
        },
        close() {
            this.show = false
        },
        touchStart(e) {
            if (e.touches.length === 1) {
                this.isDragging = true;
                this.startX = e.touches[0].clientX - this.left;
                this.startY = e.touches[0].clientY - this.top;
            }
        },
        touchMove(e) {
            if (this.isDragging && e.touches.length === 1) {
                // 计算新位置
                let newLeft = e.touches[0].clientX - this.startX;
                let newTop = e.touches[0].clientY - this.startY;
                
                // 边界检查
                const robotWidth = 75; // 机器人宽度的一半（rpx转px需要除以2）
                const robotHeight = 75; // 机器人高度的一半
                
                newLeft = Math.max(robotWidth, Math.min(newLeft, this.windowWidth - robotWidth));
                newTop = Math.max(robotHeight, Math.min(newTop, this.windowHeight - robotHeight));
                
                this.left = newLeft;
                this.top = newTop;
                
                // 阻止事件冒泡
                e.preventDefault();
            }
        },
        touchEnd() {
            this.isDragging = false;
        }
    }
}
</script>

<style scoped>
.ai-robot-container {
    position: fixed;
    z-index: 99;
    width: 150rpx;
    height: 150rpx;
    transform: translate(-50%, -50%);
}

.ai-robot-gif {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
}

.close-btn {
    z-index: 100;
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40rpx;
    box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.15);
    background-color: #fff;
}
</style>